<template>
  <ul>
    <li
      @click="toggle(index)"
      v-for="(item, index) in tabLis"
      :class="{ active: index === currentIndex }"
    >
      <span>{{ item }}</span>
    </li>
    <div class="tabs_line" :style="{transform:`translate(${25 + currentIndex * 90}px)`}"></div>
  </ul>
</template>
<script setup>
import { reactive, ref } from 'vue'
const tabLis = reactive(['tab1', 'tab2', 'tab3'])
const currentIndex = ref(0)
const toggle = (index) => {
  currentIndex.value = index
  console.log(currentIndex.value);
}
</script>
<style scoped>
ul {
  width: 100vw;
  display: flex;
  align-items: center;
  position: relative;
  li {
    width: 90px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #646566;
    span {
      display: inline-block;
      width: 40px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .active {
    color: #323233;
    /* color: red; */
}
  .tabs_line {
    position: absolute;
    z-index: 1;
    width: 40px;
    height: 3px;
    background-color: #1989fa;
    left: 0px;
    top: 40px;
    transition: all .3s;
  }
}

</style>
